<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
<div id="app">
    <!-- 登录表单 -->
    <el-form ref="loginForm" :model="user" :rules="loginRules">
        <el-form-item label="用户名" prop="userName">
            <el-input v-model="user.userName" placeholder="请输入账号或者手机号" :maxlength="12"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="userPwd">
            <el-input type="password" v-model="user.userPwd" placeholder="密码" :maxlength="12"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
    </el-form>
    <!-- 注册表单 -->
    <el-form ref="form" :model="user" >
        <!-- 表单项 -->
        <el-button type="primary" @click="dialogVisible = true">注册</el-button>
    </el-form>
    <el-link type="primary"><a href="http://localhost:8080/vue-demo/showAllGoods3.html" >暂不登录，游客进入</a></el-link>

    <!--添加数据的对话框表单-->
    <el-dialog
            title="注册"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form  status-icon :rules="rules" ref="form" :model="user" label-width="80px">
            <el-form-item label="设置昵称" prop="userNickName">
                <el-input v-model="user.userNickName" placeholder="请输入昵称" :maxlength="6"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="user.pass" autocomplete="off" placeholder="请输入密码" :maxlength="12"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="user.checkPass" autocomplete="off" placeholder="请再次输入密码" :maxlength="12"></el-input>
            </el-form-item>
            <el-form-item label="注册类型">
                <el-radio-group v-model="user.registerType">
                    <el-radio label="注册为用户" value="1"></el-radio>
                    <el-radio label="注册为商户" value="0"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号" prop="userPhone">
                <el-input v-model="user.userPhone" placeholder="输入11位的手机号" :maxlength="11"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">注册</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>

    new Vue({
        el:"#app",

        mounted(){
            //当页面加载完成之后，发布异步请求获取数据

            var _this = this;
            axios({
                method:"get",
                url:"http://localhost:8080/vue-demo/getCookie"
            }).then(function (resp) {
                _this.user = resp.data;
            })

        },

        methods: {

            onSubmit() {
                console.log(this.user);
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/register",
                    data:_this.user
                }).then(function (resp) {

                    if(resp.data === "success"){
                        //注册成功
                        console.log(_this.user);
                        alert("注册成功")
                        _this.dialogVisible =  false
                        axios({
                            method : "post",
                            url:"http://localhost:8080/vue-demo/sendAccount",
                            data:_this.user
                        }).then(function (resp) {
                            alert("账号为"+resp.data);//发送账号
                        })
                    }
                    else if(resp.data === "error"){
                        //输入不正确
                        alert("输入不正确")
                    }
                    else if(resp.data === "errorNickName"){
                        //输入不正确
                        alert("昵称重复")
                    }
                    else if(resp.data === "errorPhone"){
                        //输入不正确
                        alert("手机号重复")
                    }
                    else if(resp.data === "errorPass"){
                        //输入不正确
                        alert("密码不够6位")
                    }
                    else if(resp.data === "errorName"){
                        //输入不正确
                        alert("昵称不够3个字")
                    }

                })
            },

            login(){
                var _this = this;
                //发送请求，验证登录
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/login",
                    data:_this.user
                }).then(function (resp) {

                    console.log(resp.data);
                    if(resp.data === "success1"){
                        //商户登录成功
                        console.log(_this.user);
                        //导航到指定的URL
                        window.location.href = "http://localhost:8080/vue-demo/usersMai.html";
                    }
                    else if(resp.data === "success2"){
                        //用户登录成功
                        console.log(_this.user);
                        //导航到指定的URL
                        window.location.href = "http://localhost:8080/vue-demo/usersBuy.html";
                    }
                    else if(resp.data === "success3"){
                        //管理登录成功
                        console.log(_this.user);
                        //导航到指定的URL
                        window.location.href = "http://localhost:8080/vue-demo/manager.html";
                    }
                    else if(resp.data === "error1"){
                        //被封禁的账号
                        alert("账号被永久封禁")
                    }
                    else {
                        //登录失败
                        console.log(_this.user);
                            alert("登录失败")
                    }
                })
            },
        },
        data() {

            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (value.length < 6) {
                        return callback(new Error('密码起码要6位'));
                    }
                    else if(/\s/.test(value)){
                        //如果存在空格
                        return callback(new Error('密码不可以有空格'));
                    }
                    if (this.user.checkPass !== '') {
                        this.$refs.form.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                }
                if (value.length < 6) {
                    return callback(new Error('密码起码要6位'));
                }
                else if(/\s/.test(value)){
                    //如果存在空格
                    return callback(new Error('密码不可以有空格'));
                }
                else if (value !== this.user.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            var validateName = (rule, value, callback) => {
                if (value.length < 3) {
                    return callback(new Error('昵称或账号不能少于3个字'));
                }
                else if(/\s/.test(value)){
                    //如果存在空格
                    return callback(new Error('昵称不可以有空格'));
                }
                else {
                    callback();
                }
            };

            var validatePhone = (rule, value, callback) => {
                if (value.length !== 11) {
                    return callback(new Error('必须是11位数'));
                }
                else {
                    if(/\D/.test(value)){
                        //如果含有其他的符号
                        return callback(new Error('电话号码不能有符号'));
                    }
                    else {
                        callback();
                    }
                }
            };
            var checkPwd = (rule, value, callback) => {
                if (value.length < 6) {
                    return callback(new Error('密码起码要6位'));
                }
                else if(/\s/.test(value)){
                    //如果存在空格
                    return callback(new Error('密码不可以有空格'));
                }
            }
            var checkName = (rule, value, callback) => {
                if (value.length < 8) {
                    return callback(new Error('请输入8位的账号或手机号'));
                }
                else if(/\s/.test(value)){
                    //如果存在空格
                    return callback(new Error('账号不可以有空格'));
                }
            }
            return{
                user: {
                    userName: '',
                    userPwd: '',
                    userNickName: '',
                    registerType:'注册为用户',
                    userPhone:'',
                    pass: '',
                    checkPass: '',
                },
                loginRules: {
                    userName: [
                        { validator: checkName, trigger: 'blur' }
                    ],
                    userPwd: [
                        {trigger: 'blur',validator: checkPwd, }
                    ]
                },
                rules: {
                    // 注册规则
                    userPhone: [
                        { validator: validatePhone, trigger: 'blur' }
                    ],
                    userNickName: [
                        { validator: validateName, trigger: 'blur' }
                    ],
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { validator: validatePass2, trigger: 'blur' }
                    ],
                },
                dialogVisible: false,
            };
        }
    })
</script>

</body>
</html>




